<template>
  <div>
    <quill-editor ref="myTextEditor"
                  v-model="content"
                  :options="editorOption"
                  @blur="onEditorBlur($event)"
                  @focus="onEditorFocus($event)"
                  @ready="onEditorReady($event)"
                  class="easy-quill-editor">
      <div id="toolbar"
           slot="toolbar">
        <button class="ql-bold"
                title="加粗">Bold</button>
        <button class="ql-italic"
                title="斜体">Italic</button>
        <button class="ql-underline"
                title="下划线">underline</button>
        <button class="ql-strike"
                title="删除线">strike</button>
        <button class="ql-blockquote"
                title="引用"></button>
        <button class="ql-code-block"
                title="代码"></button>
        <button class="ql-header"
                value="1"
                title="标题1"></button>
        <button class="ql-header"
                value="2"
                title="标题2"></button>
        <button class="ql-list"
                value="ordered"
                title="有序列表"></button>
        <button class="ql-list"
                value="bullet"
                title="无序列表"></button>
        <select class="ql-header"
                title="段落格式">
          <option selected>段落</option>
          <option value="1">标题1</option>
          <option value="2">标题2</option>
          <option value="3">标题3</option>
          <option value="4">标题4</option>
          <option value="5">标题5</option>
          <option value="6">标题6</option>
        </select>
        <select class="ql-size"
                title="字体大小">
          <option value="10px">10</option>
          <option value="12px">12</option>
          <option value="14px">14</option>
          <option value="16px"
                  selected>16</option>
          <option value="18px">18</option>
          <option value="20px">20</option>
          <option value="24px">24</option>
          <option value="30px">30</option>
          <option value="32px">32</option>
          <option value="36px">36</option>
        </select>
        <select class="ql-font"
                title="字体">
          <option value="SimSun"
                  selected="selected"></option>
          <option value="SimHei"></option>
          <option value="Microsoft-YaHei"></option>
          <option value="KaiTi"></option>
          <option value="FangSong"></option>
          <option value="Arial"></option>
          <option value="Times-New-Roman"></option>
          <option value="sans-serif"></option>
        </select>
        <select class="ql-color"
                value="color"
                title="字体颜色"></select>
        <select class="ql-background"
                value="background"
                title="背景颜色"></select>
        <select class="ql-align"
                value="align"
                title="对齐"></select>
        <button class="ql-clean"
                title="还原"></button>
      </div>
    </quill-editor>
  </div>
</template>

<style lang="scss">
.easy-quill-editor {
  line-height: 24px;
  .ql-snow {
    background-color: #ffffff;
  }
}
</style>

<script>
import '@/style/common.scss'
import '@/style/info.scss'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { api } from '@/api'
import { quillEditor } from 'vue-quill-editor'
import * as Quill from 'quill'
import { devBaseURL } from '@/utils/http'
import { HTTPSUCCESS, HTTPDATAFAIL, HTTPPARAMFAIL, HTTPUNKOWNFAIL } from '@/components/constant'
import { getToken } from '@/utils/auth'

// quill编辑器的字体
var fonts = ['SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong', 'Arial', 'Times-New-Roman', 'sans-serif']
var Font = Quill.import('formats/font')
Font.whitelist = fonts // 将字体加入到白名单
Quill.register(Font, true)

var size = ['10px', '12px', '14px', '16px', '18px', '20px', '24px', '30px', '32px', '36px']
var Size = Quill.import('attributors/style/size')
Size.whitelist = size
Quill.register(Size, true)

export default {
  data() {
    return {
      content: null,
      editorOption: {
        modules: {
          toolbar: '#toolbar'
        }
      }
    }
  },
  watch: {
    content: {
      handler: function() {
        this.$emit('update:myContent', this.content)
      }
    },
    myContent: {
      handler: function() {
        this.content = this.myContent
      }
    }
  },
  props: {
    myContent: {
      type: String
    }
  },
  components: { quillEditor },
  created() {
    this.initialized()
  },
  methods: {
    initialized() {
      this.content = this.myContent
    },
    onEditorBlur(event) {
      console.log('blur', event)
    },
    onEditorFocus(event) {
      console.log('focus', event)
    },
    onEditorReady(event) {
      console.log('ready', event)
    }
  }
}
</script>
